<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="fonts/iconfont.css" />
		<style>
			* {
				font-family: simhei, Helvetica, Arial, sans-serif;
			}

			#dialog-template{
				display: none;
			}		
			
			button {
				display: inline-block;
				border: 0;
				box-sizing: border-box;
				color: #fff;
				font-size: 1em;
				border-radius: .1em;
				line-height: 2em;
				padding: 0 1em;
				transition: .4s ease-out;
				outline: 0;
				text-decoration: none;
			}
			
			button:hover,
			button:focus {
				opacity: 0.5;
				cursor: pointer;
				transition: .15s ease-in;
			}
			
			.btn-group{
				margin: 200px auto;
				width: 640px;
			}
			
			.btn-info{
				background: #0090d3;
			}
			
			.btn-success{
				background: #00cc66;
			}
			
			.btn-warning{
				background: #f0ad4e;
			}
			
			.btn-error{
				background: #d9534f;
			}
			
			.dialog {
				width: 480px;
				position: fixed;
				left: 50%;
				top: 2em;
				transform: translateX(-50%);
				z-index: 2000;
				visibility: hidden;
				backface-visibility: hidden;
				perspective: 1300px;
			}
			
			.dialog-active {
				visibility: visible;
			}
			
			.dialog-active .dialog-content {
				position: relative;
				opacity: 1;
				transform: rotateY(0);
			}
			
			.dialog-active ~ .dialog-overlay {
				opacity: 1;
				visibility: visible;
			}
			
			.dialog-content {
				border-radius: 3px;
				background: #fff;
				overflow: hidden;
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
				transition: .5s ease-in-out;
				opacity: 0;
				transform-style: preserve-3d;
				transform: rotateY(-70deg);
			}
			
			.dialog-header {
				color: #fff;
			}
			
			.dialog-title {
				margin: 0;
				font-size: 2em;
				text-align: center;
				font-weight: 200;
				line-height: 2em;
			}
			
			.dialog-body {
				padding: 2em;
			}
			
			.dialog-footer {
				margin: 0 2em;
				padding: 2em 0;
				text-align: right;
				border-top: 1px solid rgba(0, 0, 0, 0.1);
			}
			
			.dialog-overlay {
				content: "";
				position: fixed;
				visibility: hidden;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1000;
				opacity: 0;
				background: rgba(0, 0, 0, 0.5);
				transition: all .6s;
			}
			
			.dialog-info .dialog-header,.dialog-info button {
				background-color: #0090d3;
			}
			
			.dialog-success .dialog-header,.dialog-success button {
				background-color: #00cc66;
			}
			
			.dialog-warning .dialog-header,.dialog-warning button {
				background-color: #f0ad4e;
			}
			
			.dialog-error .dialog-header,.dialog-error button {
				background-color: #d9534f;
			}
			
			.close {
				display: inline-block;
				width: 2rem;
				height: 2rem;
				position: absolute;
				top: .5rem;
				right: .5rem;
				transition: .8s ease all;
				-moz-transition: .8s ease all;
				-webkit-transition: .8s ease all;
				border: none;
				border-radius: 3px;
				color: #333;
				text-decoration: none;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			
			.close:hover {
				transition: .8s ease all;
				-moz-transition: .8s ease all;
				-webkit-transition: .8s ease all;
			}
			
			.close .iconfont {
				font-size: 2rem;
				color: #fff;
			}
			
			.rotate {
				cursor: pointer;
			}
			
			.rotate:hover {
				transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				transition: transform 1.0s ease all;
				-moz-transition: -moz-transform 1.0s ease all;
				-webkit-transition: -webkit-transform 1.0s ease all;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<modal-dialog v-bind:show.sync="show" v-bind:class="dialogClass">

				<header class="dialog-header" slot="header">
					<h1 class="dialog-title">提示信息</h1>
				</header>

				<div class="dialog-body" slot="body">
					<p>你想在对话框中放什么内容都可以！</p>
					<p>你可以放一段文字，也可以放一些表单，或者是一些图片。</p>
				</div>

				<footer class="dialog-footer" slot="footer">
					<button @click="closeDialog">关闭</button>
				</footer>
			</modal-dialog>

			<div class="btn-group"> 
				<button class="btn-info" @click="openDialog('dialog-info')">提示信息对话框</button>
				<button class="btn-success" @click="openDialog('dialog-success')">提示成功对话框</button>
				<button class="btn-warning" @click="openDialog('dialog-warning')">提示警告对话框</button>
				<button class="btn-error" @click="openDialog('dialog-error')">提示错误对话框</button>
			</div>

		</div>

		<template id="dialog-template">
			<div class="dialogs">
				<div class="dialog" v-bind:class="{ 'dialog-active': show }">
					<div class="dialog-content">
						<div class="close rotate">
							<span class="iconfont icon-close" @click="close"></span>
						</div>
						<slot name="header"></slot>
						<slot name="body"></slot>
						<slot name="footer"></slot>
					</div>
				</div>
				<div class="dialog-overlay"></div>
			</div>
		</template>

		<script src="js/vue.js"></script>
		<script>
			Vue.component('modal-dialog', {
				template: '#dialog-template',
				props: ['show'],
				methods: {
					close: function() {
						this.show = false
					}
				}
			})

			new Vue({
				el: '#app',
				data: {
					show: false,
					dialogClass: 'dialog-info'
				},
				methods: {
					openDialog: function(dialogClass) {
						this.show = true
						this.dialogClass = dialogClass
					},
					closeDialog: function() {
						this.show = false
					}
				}
			})
		</script>
	</body>

</html>